<template>
  <div>
    <div class="text-center bg-light p-3" style="height: 7vh;">This is More.</div>
    <div class="d-flex" style="height: 76vh;">
      <div id="menuNav"
           :scrollTop.prop="menuListTop00"
           style="overflow: scroll;"
           class="w-25 menu-nav">
        <div v-for="(item, index) in arr1"
             :key="item.id"
             class="menu-nav-list py-5"
             :class="{active: index === judge}"
             @click="menuNavList(index)">{{item.menuName}}</div>
      </div>
      <div :scrollTop.prop="menuListTop01"
           @scroll="menuListScroll"
           id="menuList"
           class="w-75 menu-lists"
           style="overflow: scroll; font-size: 1.5rem">
        <div v-for="(item, index) in arr2" :key="index" class="menu-list p-3">
          <div class="bg-dark text-light">{{item.name}}</div>
          <!--下面是子菜单-->
          <!--下面是子菜单-->
          <!--下面是子菜单-->
          <div v-for="(item1, id) in item.menuList" class="d-flex p-3" :key="id">
            <div class="mr-auto">{{item1.name}}</div>
            <span style="color: blue;">{{item1.price}}</span>
            <span class="px-2 pt-2" style="font-size: 1rem;">元</span>
            <CountControl @count-increase="countIncrease"
                          @info-increase="infoIncrease(item1)"
                          @info-decrease="infoDecrease(item1)"
                          @count-decrease="countDecrease">
            </CountControl>
          </div>
        </div>
      </div>
    </div>
    <!--接下来是购物车-->
    <div style="height: 10vh;">
      <span>{{totalCount}}</span>
      <span>{{totalPrice}}</span>
      <span>元</span>
    </div>
    <footer class="show-footer bg-dark text-center" style="height: 7vh;">
      <div class="d-flex footer-menu-control">
        <router-link to="/home" role="button" class="btn w-100 p-2 text-light"><i class="fa fa-drivers-license-o pr-1"></i>Home</router-link>
        <router-link to="/more" role="button" class="btn w-100 p-2 text-light"><i class="fa fa-plus-circle pr-1"></i>More</router-link>
        <router-link to="/order/all" role="button" class="btn w-100 p-2 text-light"><i class="fa fa-sticky-note-o pr-1"></i>Order</router-link>
        <router-link to="/userInfo" role="button" class="btn w-100 p-2 text-light"><i class="fa fa-user-o pr-1"></i>Me</router-link>
      </div>
    </footer>
  </div>
</template>

<script>
import CountControl from './order/CountControl'
export default {
  name: 'More',
  components: {CountControl},
  data: function () {
    return {
      menuListTop00: 0,
      menuListTop01: 0,
      judge: 0,
      parentdata: {name: '张飞'},
      cartArr: [],
      idArr: [],
      obj: {
        name: '',
        price: 0,
        count: 0,
        id: ''
      },
      arr1: [
        {
          menuName: 'menu_nav_01',
          id: '1'
        },
        {
          menuName: 'menu_nav_02',
          id: '2'
        },
        {
          menuName: 'menu_nav_03',
          id: '3'
        },
        {
          menuName: 'menu_nav_04',
          id: '4'
        },
        {
          menuName: 'menu_nav_05',
          id: '5'
        }
      ],
      arr2: [
        {
          name: 'menu01',
          menuList: [
            {
              id: '001',
              price: 10,
              name: 'list1-01'
            },
            {
              id: '002',
              price: 15,
              name: 'list1-02'
            },
            {
              id: '003',
              price: 10,
              name: 'list1-03'
            },
            {
              id: '004',
              price: 15,
              name: 'list1-04'
            },
            {
              id: '005',
              price: 10,
              name: 'list1-05'
            },
            {
              id: '006',
              price: 15,
              name: 'list1-06'
            }
          ]
        },
        {
          name: 'menu02',
          menuList: [
            {
              id: '007',
              price: 20,
              name: 'list2-01'
            },
            {
              id: '008',
              price: 25,
              name: 'list2-02'
            },
            {
              id: '009',
              price: 20,
              name: 'list2-03'
            },
            {
              id: '010',
              price: 25,
              name: 'list2-04'
            },
            {
              id: '011',
              price: 20,
              name: 'list2-05'
            },
            {
              id: '012',
              price: 25,
              name: 'list2-06'
            },
            {
              id: '013',
              price: 10,
              name: 'list1-07'
            },
            {
              id: '014',
              price: 15,
              name: 'list2-08'
            }
          ]
        },
        {
          name: 'menu03',
          menuList: [
            {
              id: '015',
              price: 30,
              name: 'list3-01'
            },
            {
              id: '016',
              price: 35,
              name: 'list3-02'
            },
            {
              id: '017',
              price: 30,
              name: 'list3-03'
            },
            {
              id: '018',
              price: 35,
              name: 'list3-04'
            },
            {
              id: '019',
              price: 30,
              name: 'list3-05'
            },
            {
              id: '020',
              price: 35,
              name: 'list3-06'
            },
            {
              id: '021',
              price: 30,
              name: 'list3-07'
            },
            {
              id: '022',
              price: 35,
              name: 'list3-08'
            }
          ]
        },
        {
          name: 'menu04',
          menuList: [
            {
              id: '023',
              price: 40,
              name: 'list4-01'
            },
            {
              id: '023',
              price: 45,
              name: 'list4-02'
            },
            {
              id: '024',
              price: 40,
              name: 'list4-03'
            },
            {
              id: '025',
              price: 45,
              name: 'list4-04'
            },
            {
              id: '026',
              price: 40,
              name: 'list4-05'
            },
            {
              id: '027',
              price: 45,
              name: 'list4-06'
            },
            {
              id: '028',
              price: 40,
              name: 'list4-07'
            },
            {
              id: '029',
              price: 45,
              name: 'list4-08'
            }
          ]
        },
        {
          name: 'menu05',
          menuList: [
            {
              id: '030',
              price: 50,
              name: 'list5-01'
            },
            {
              id: '031',
              price: 55,
              name: 'list5-02'
            },
            {
              id: '032',
              price: 50,
              name: 'list5-03'
            },
            {
              id: '033',
              price: 55,
              name: 'list5-04'
            },
            {
              id: '034',
              price: 50,
              name: 'list5-05'
            },
            {
              id: '035',
              price: 55,
              name: 'list5-06'
            },
            {
              id: '036',
              price: 50,
              name: 'list5-07'
            },
            {
              id: '037',
              price: 55,
              name: 'list5-08'
            },
            {
              id: '038',
              price: 50,
              name: 'list5-09'
            },
            {
              id: '039',
              price: 55,
              name: 'list5-10'
            },
            {
              id: '040',
              price: 50,
              name: 'list5-11'
            },
            {
              id: '041',
              price: 55,
              name: 'list5-12'
            }
          ]
        }
      ],
      totalPrice: 0,
      totalCount: 0
    }
  },
  methods: {
    menuNavList: function (index) {
      //  这里产生了一个问题。点击第一次的时候，激活的是上一个菜单，再次点击时，才激活当前菜单；
      let menuListNode = document.getElementsByClassName('menu-list')
      let nodeHeight = 0
      for (let i = 0; i < menuListNode.length; i++) {
        if (i === index) {
          break
        }
        nodeHeight += menuListNode[i].offsetHeight
      }
      this.menuListTop01 = nodeHeight
      this.judge = index
    },
    menuListScroll: function (e) {
      let menuListNode = document.getElementsByClassName('menu-list')
      let nodeHeight = 0
      for (let i = 0; i < menuListNode.length; i++) {
        nodeHeight += menuListNode[i].offsetHeight
        if (nodeHeight >= e.target.scrollTop) {
          this.judge = i
          break
        }
      }
      //  以下代码是反向控制导航栏中的scrollTop值，实现滚动并高亮显示；

      let menuNavNode = document.getElementsByClassName('menu-nav-list')
      let menuNav = document.getElementsByClassName('menu-nav')
      // console.log(menuNav)
      let menuNavHeight = 0
      for (let j = 0; j < menuNavNode.length; j++) {
        menuNavHeight += menuNavNode[j].offsetHeight
        if (j === this.judge && this.judge !== 0) {
          this.menuListTop00 = menuNavHeight - (menuNav[0].clientHeight) * 7 / 9
          // console.log(menuNavHeight)
          break
        } else {
          this.menuListTop00 = 0
        }
      }
    },
    infoIncrease: function (info) {
      let obj = {
        name: '',
        price: 0,
        count: 0,
        id: ''
      }
      obj.name = info.name
      obj.id = info.id
      obj.price = info.price
      this.obj = obj
    },
    countIncrease: function (para) {
      this.obj.count = para
      if (this.idArr.indexOf(this.obj.id) === -1) {
        this.idArr.push(this.obj.id)
        this.cartArr.push(this.obj)
        // console.log(this.cartArr)
        return
      }
      for (let i = 0; i < this.cartArr.length; i++) {
        if (this.cartArr[i].id === this.obj.id) {
          this.cartArr[i].count = para
        }
      }
      // console.log(this.cartArr)
    },
    countDecrease: function (para) {
      if (para) {
        for (let i = 0; i < this.cartArr.length; i++) {
          if (this.cartArr[i].id === this.obj.id) {
            this.cartArr[i].count = para
          }
        }
      } else {
        this.idArr.splice(this.idArr.indexOf(this.obj.id), 1)
        for (let i = 0; i < this.cartArr.length; i++) {
          if (this.cartArr[i].id === this.obj.id) {
            this.cartArr.splice(i, 1)
          }
        }
      }
      // console.log(this.cartArr)
    },
    infoDecrease: function (info) {
      let obj = {
        name: '',
        price: 0,
        count: 0,
        id: ''
      }
      obj.name = info.name
      obj.id = info.id
      obj.price = info.price
      this.obj = obj
    }
  }
}
</script>

<style scoped>
  .show-footer{
    display: block;
    width: 100%;
    position: fixed;
    bottom: 0;
    margin-top: 2rem;
  }
  .active{
    background-color: rgba(22,114,133,0.74);
  }
</style>
